<template>
	<view class="bg-white  font-size-12">


		<u-cell :titleStyle="{'alignItems':'normal'}">
			<view slot="icon" class="mg-10">
				<image class="shop-img br-rd-6" mode="scaleToFit" :src="item.image" radius="10"></image>
			</view>
			<view slot="title">
				<text>{{item.name}}</text>
			</view>
			<view slot="value">
				<u-number-box name="1" value="0" :min="0" @change="valChange" buttonSize="25">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="12"></u-icon>
					</view>
<!-- 					<text slot="input" style="width: 30px;text-align: center;" class="input">{{value}}</text> -->
                       <input  slot="input" style="width: 30px;text-align: center;" @input="valInputChange"  @change="valInputChange" class="input ltr" :value="value" />
					<view slot="plus" class="plus">
						<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
					</view>
				</u-number-box>
			</view>
			<view slot="label">
				<text class="u-error">{{item.price?item.price:item.marketPrice}}￥</text>
			</view>

		</u-cell>


	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				value: 0
			}
		},
		mounted: function() {

		},

		methods: {
			valInputChange:function(e){
				console.log(e.detail)
				var value=e.detail.value
				value=parseInt(value);
				if(isNaN(value)){
					value=0;
				}
			
				this.valChange({value:value})
			},
			valChange: function(e) {
				console.log(e)
				var price=this.item.price?this.item.price:this.item.marketPrice
				this.item.quantity = e.value
				this.item.price=uni.$u.priceFormat(price,2)
				this.value = e.value
				var op = {
					value: e.value,
					item: this.item
				}
				this.$emit("action", op)
			}
		}
	}
</script>


<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 5px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.shop-img {
		width: 60px;
		height: 60px;
		background-color: aliceblue;

	}
</style>